<template>
   <button @click="myBtn">toggle</button>
   <transition name="fade">
    <div class="box" v-if="show"></div>
   </transition>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
    setup () {
        const state = reactive({
           show: true
        })
        const myBtn = () => {
            state.show=!state.show
        }
        return {
            ...toRefs(state),
            myBtn
        }
    }
}
</script>

<style scoped>
 .box {
   width:100px;
   height: 200px;
   background-color:greenyellow;
  }
  .fade-enter-active, .fade-leave-active {
   transition: height 5s;
  }
  .fade-enter {
   height: 0;
  }
  .fade-enter-to {
   height: 200px;
  }
  .fade-leave {
   height: 200px;
  }
  .fade-leave-to {
   height: 0;
  }
</style>